<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
    <style>
        #photo {
            width: 600px;
            height: 624px;
            border: 1px solid;
            margin: auto;
            display: flex;
            position: relative;
            align-items: center;
            justify-content: center;
        }

        #big_photo {
            width: 600px;
            height: 624px;
            background-image: url(./学习素材/test.jpg)
        }

        #btn {
            width: 580px;
            height: 100px;

            /* border: 1px solid; */
            position: absolute;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        #left,
        #right {
            width: 50px;
            height: 50px;
            background-color: rgba(247, 247, 247, 0.5);
            border-radius: 50%;
            text-align: center;
            line-height: 50px;
        }

        #left>i,
        #right>i {
            color: rgb(114, 114, 114);
        }

        #left:hover,
        #right:hover {
            background-color: rgba(173, 173, 173, 0.5);
        }

        #left:hover i,
        #right:hover i {
            color: rgb(22, 22, 22);
        }

        .bottom {
            width: 80px;
            height: 30px;
            /* border: 1px solid; */
            position: absolute;
            bottom: 0;
            display: flex;
            justify-content: space-between;
        }

        div>i {
            color: rgba(255, 255, 255, 0.7);
        }

    
        div>i:hover {
            color: rgba(0, 0, 0, 0.5);
        }
    </style>
</head>

<body>
    <div id="photo">
        <div id="big_photo"></div>
        <div id="btn">
            <div id="left"><i class="fa fa-chevron-left"></i></div>
            <div id="right"><i class="fa fa-chevron-right"></i></div>
        </div>
        <div class="bottom">
            <div><i class="fa fa-circle"></i></div>
            <div><i class="fa fa-circle"></i></div>
            <div><i class="fa fa-circle"></i></div>
            <div><i class="fa fa-circle"></i></div>

        </div>
    </div>
    <script>
        let imags = ["./学习素材/test.jpg", "./学习素材/test2.jpg", "./学习素材/test3.jpg", "./学习素材/test4.jpg"];
        let container = document.getElementById('photo')
        let photo = document.getElementById('big_photo');
        let leftBtn = document.getElementById('left');
        let rightBtn = document.getElementById('right');
        let div = document.querySelectorAll('.bottom>div>i')

        let index = 0;
        let timer = null;

        // 正常滚
        function foo() {
            timer = setInterval(function () {
                index++;
                if (index > imags.length - 1) {
                    index = 0;
                }
                photo.style.backgroundImage = `url(${imags[index]})`;
                circleStyle()
            }, 2000);
        }
        foo();


        //渲染圆
        function circleStyle() {
            for (let item of div) { // item -> 每个 li
                item.style.color = 'rgba(255, 255, 255, 0.7)';
            }
            div[index].style.color = 'rgba(0, 0, 0, 0.5)';
        }

        //移入停止
        container.onmouseenter = function () {
            clearInterval(timer);
            timer = null;

        }
        //移出开始
        container.onmouseleave = function () {
            foo();
        }
        //左点
        left.onclick = function () {
            index--;
            if (index < 0) {
                index = 3;
            }
            photo.style.backgroundImage = `url(${imags[index]})`;
            circleStyle()

        }
        //右点
        right.onclick = function () {
            index++;
            if (index > imags.length - 1) {

                index = 0;
            }
            photo.style.backgroundImage = `url(${imags[index]})`;
            circleStyle()
        }

        //点击滚动
        for (let j = 0; j < imags.length; j++) {
            div[j].onclick = function () {
                photo.style.backgroundImage = `url(${imags[j]})`
            }
        }
    </script>
</body>

</html>